$width: 208px;
$colled_width: 48px;
.menu {
    .left_flex_hidden {
        width: $width;
        height: 100%;
        transition: width 0.3s;
    }
    .context {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        width: $width;
        height: 100%;
        background-color: #001529;
        flex-direction: column;
        transition: width 0.3s;
        .logo {
            width: 100%;
            height: 64px;
            color: #fff;
            .icon {
                float: left;
                width: 48px;
                font-size: 20px;
                color: #096dd9;
                line-height: 64px;
                text-align: center;
            }
            .text {
                float: left;
                line-height: 64px;
            }
        }
        .menu_context {
            overflow: auto;
            flex: 1 1;
            &::-webkit-scrollbar {
                width: 8px;
            }
            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background-color: rgba(#fff, 0.2);
            }
            &::-webkit-scrollbar-track {
                background-color: rgba(#fff, 0.1);
            }
            .menu_ul {
                width: 100%;
            }
        }
        .collapsed_button {
            width: 100%;
            height: 40px;
            cursor: pointer;
            .icon {
                width: $colled_width;
                height: 100%;
                font-size: 16px;
                color: #fff;
                line-height: 40px;
                text-align: center;
            }
        }
    }
    &.active {
        .left_flex_hidden {
            width: $colled_width;
        }
        .context {
            width: $colled_width;
        }
    }
}
